<!DOCTYPE html>
<html style="height: 90%; width: 100%" xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <!-- layui -->
    <link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}"  media="all"/>
    <script type="text/javascript" th:src="@{/plug/layui/layui.js}"  charset="utf-8"></script>
</head>
<body style="height: 90%;width: 100%; margin: 0">
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
<script type="text/javascript" th:src="@{/js/echarts/echarts.js}"></script>
<div id="container" style="height: 90%;width: 100%"></div>
</body>
</html>

<script type="text/javascript" th:inline="javascript">
    var a1 = [[${a1}]];
    var a2 = [[${a2}]];
    var a3 = [[${a3}]];
    var a4 = [[${a4}]];

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;

    function fulshEchart(a1, a2, a3, a4){
        console.log(a1);
        console.log(a2);
        console.log(a3);
        console.log(a4);
        setTimeout(function () {
            option = {
                title: {
                    text: '预约状态数量统计',
                    subtext: '根据预约状态数量进行统计,体现医院整体办事效率',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['不通过', '申请中', '申请通过', '已完成']
                },
                series: [
                    {
                        name: '类型',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            {value: a3, name: '不通过'},
                            {value: a1, name: '申请中'},
                            {value: a2, name: '申请通过'},
                            {value: a4, name: '已完成'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart.on('updateAxisPointer', function (event) {
                var xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    var dimension = xAxisInfo.value + 1;
                    myChart.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });

            myChart.setOption(option);

        });

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }

    $(function(){
        fulshEchart( a1, a2, a3, a4);
    });

</script>